import React, { useState, forwardRef, useImperativeHandle } from 'react';
import './index.css';
import { Button } from 'antd';

interface baseBankSearchBtnListProps {
  list: { label: string; value: string }[];
}

const BankSearchBtnList = forwardRef((props: baseBankSearchBtnListProps, _ref) => {
  const { list = [] } = props;
  const [selectBtn, setSelectBtn] = useState<string[]>([]);

  const handleClickBtn = (_value: string) => {
    if (!selectBtn.includes(_value)) {
      setSelectBtn([...selectBtn, _value])
    } else {
      setSelectBtn(selectBtn.filter(k => k !== _value));
    }
  }

  const getViewBtn = (_list: { label: string; value: string }[]) => {
    return _list.map((k, i) => {
      return <Button key={i} type={selectBtn.includes(k.value) ? "primary" : "default"} className='btn-span' onClick={() => handleClickBtn(k.value)}>{k.label}</Button>
    })
  }

  useImperativeHandle(_ref, () => {
    return { selectBtn }
  })

  return (
    <div>
      <div className='btn-box'>
        <div className='btn-label'><span className='btn-required'>*</span>交易状态：</div>
        <div className='btn-right-box'>{getViewBtn(list)}</div>
      </div>
    </div>
  )
});

export default BankSearchBtnList;